<template>
	<!-- pages/publishGoods/publishGoods.wxml -->
	<view class="publishGoods">
		<template v-if="!showVideo">
			<view class="publishGoods_form">
				<view class="form_item">
					<text class="item_lab">商品名称</text>
					<input class="item_input" v-model="title" placeholder-style="color: #8B8B8B;" placeholder="请输入商品名称"
						type="text">
					<image class="item_icon" src="/static/pages/image/area_right.png"></image>
				</view>
				<view class="form_item">
					<text class="item_lab">商品分类</text>
					<picker class="item_input" @change="bindRegionChange" :value="currentIndex" range-key="name"
						:range="goods_type">
						<view class="picker" v-if="currentIndex || currentIndex == 0 ">{{goods_type[currentIndex].name}}
						</view>
						<view style="color: #8B8B8B;" v-else>请选择商品分类</view>
					</picker>
					<!-- <input class="item_input" model:value="{{title}}" placeholder-style="color: #8B8B8B;" placeholder="请输入商品名称" type="text" /> -->
					<image class="item_icon" src="/static/pages/image/area_right.png"></image>
				</view>
				<view class="form_item">
					<text class="item_lab">发货地址</text>
					<input class="item_input" v-model="delivery_place" placeholder-style="color: #8B8B8B;" placeholder="请输入发货地址"
						type="text">
					<image class="item_icon" src="/static/pages/image/area_right.png"></image>
				</view>
				<!-- <view class="form_item">
					<text class="item_lab">出售价格</text>
					<input class="item_input" v-model="sell_price" placeholder-style="color: #8B8B8B;"
						placeholder="请输入实际出售价格" type="text">
					<image class="item_icon" src="/static/pages/image/area_right.png"></image>
				</view> -->
				<!-- <view class="form_item">
					<text class="item_lab">市场价格</text>
					<input class="item_input" v-model="market_price" placeholder-style="color: #8B8B8B;"
						placeholder="请输入市场出售价格" type="text">
					<image class="item_icon" src="/static/pages/image/area_right.png"></image>
				</view> -->
				<!-- <view class="form_item">
					<text class="item_lab">库存数量</text>
					<input class="item_input" v-model="stock" placeholder-style="color: #8B8B8B;" placeholder="请输入商品库存数量"
						type="number">
					<image class="item_icon" src="/static/pages/image/area_right.png"></image>
				</view> -->
				<!-- <view class="form_item" @click="toProductSpecifications">
					<text class="item_lab">产品规格</text>
					<input class="item_input" disabled v-model="parm" placeholder-style="color: #8B8B8B;"
						placeholder="请配置产品规格" type="number">
					<image class="item_icon" src="/static/pages/image/area_right.png"></image>
				</view> -->
			</view>
			<view class="form_upImg">
				<!-- <view class="upImg_show upImg_video">
					<view class="upImg_title">
						<text class="title_txt">添加展示视频</text>
					</view>
					<view class="upImg_content">
					</view>
				</view>
				 -->
				
				<view class="upImg_show">
					<view class="upImg_title">
						<text class="title_txt">添加展示视频/图片</text>
					</view>
					<view class="upImg_content">
						<view v-for="(item, index) in video" :key="index" class="upImg_item"
							style="background-color: #000000;">
							<image class="item_icon" src="/static/pages/image/tupiangb_btn.png" @tap="delVideo(index)">
							</image>
							<image class="item_play" src="/static/pages/image/play.png" mode="widthFix"
								@tap="playVideo(item)"></image>
							<view class="item_bottom" @click="chooseVideo(index)">
								<text class="item_txt">重新上传</text>
							</view>
						</view>
						<view class="upImg_item upImg" @tap="onUpVideo" v-if="!video.length">
							<image src="/static/pages/image/video.png" class="upImg_img"></image>
							<view class="item_bottom">
								<text class="item_txt">上传视频</text>
							</view>
						</view>
						
						<view v-for="(item, index) in image" :key="index" class="upImg_item"
							:style="'background-image: url('+item+'); background-size: 100% 100%;'" :data-index="index">
							<image class="item_icon" src="/static/pages/image/tupiangb_btn.png" data-type="1"
								:data-index="index" @tap="delImg"></image>
							<view class="item_bottom">	
								<text class="item_txt">重新上传</text>
							</view>
						</view>
						<view class="upImg_item upImg" @tap="upImage" data-type="1"  v-if="!image.length">
							<image src="/static/pages/image/upImg.png" class="upImg_img"></image>
							<view class="item_bottom">
								<text class="item_txt">上传图片</text>
							</view>
						</view>
						
						
					</view>
				</view>

				<!-- 规格 -->
				<view class="form_specification">
					<view class="specification_head">
						<text class="head_title">商品价格款式</text>
						<view class="head_right" @click="onAddParams">
							<image class="add_icon" src="/static/pages/image/add_specification.png" mode=""></image>
							<text>添加</text>
						</view>
					</view>
					<view class="specification_content">
						<view class="specification_item" v-for="(item,index) in paramList" :key="index">
							<view class="item_left" v-if="item.param_image" @click="upParamsImage(index)">
								<image class="image" :src="item.param_image" mode=""></image>
								<view class="txt">重新上传</view>
								<image class="item_icon" src="/static/pages/image/tupiangb_btn.png"
									@click.stop="delParam(index)"></image>
							</view>
							<view class="item_upImage" v-else @click="upParamsImage(index)">
								<image src="/static/pages/image/upImg.png" class="upImg_img"></image>
								<view class="txt">点击上传</view>
							</view>

							<view class="item_right">
								<view class="form_item">
									<text class="form_lab">出售价格</text>
									<input class="form_ipt" @confirm="confirmInput(index)" @blur="confirmInput(index)"
										v-model="item.param_price" placeholder="请输入价格" placeholder-style="color:#767676"
										type="text" value="" />
								</view>
								<view class="form_item">
									<text class="form_lab">规格款式</text>
									<input class="form_ipt" @confirm="confirmInput(index)" @blur="confirmInput(index)"
										v-model="item.name" placeholder="请编辑规格款式" placeholder-style="color:#767676"
										type="text" value="" />
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="upImg_show upImg_particulars">
					<view class="upImg_title">
						<text class="title_txt">产品介绍</text>
						<text class="title_tips">（限制15张图）</text>
					</view>
					<view class="upImg_content">
						<view v-for="(item, index) in introduce" :key="index" class="upImg_item"
							:style="'background-image: url('+item+'); background-size: 100% 100%;'" :data-index="index">
							<image class="item_icon" src="/static/pages/image/tupiangb_btn.png" data-type="2"
								:data-index="index" @tap="delImg"></image>
							<view class="item_bottom">
								<text class="item_txt">重新上传</text>
							</view>
						</view>
						<view class="upImg_item upImg" @tap="upImage" data-type="2">
							<image src="/static/pages/image/upImg.png" class="upImg_img"></image>
							<view class="item_bottom">
								<text class="item_txt">点击上传</text>
							</view>
						</view>
					</view>
				</view>
			</view>


			<view class="footer_btn">
				<button class="btn" @tap="onSubmit">{{id ? '确认修改' : '确认上传'}}</button>
			</view>
		</template>

		<template v-else>
			<video :src="videoSrc" :autoplay="true" style="width: 100%;height: 100%;" controls></video>
			<cover-image @click="closeVideo" class="close_image" src="/static/pages/image/close-video.png" />
		</template>


	</view>
</template>

<script>
	// pages/publishGoods/publishGoods.js
	var app = getApp();

	export default {
		data() {
			return {
				image: [],
				introduce: [],
				currentIndex: null,
				goods_type: [],
				title: null,
				sell_price: '',
				market_price: '',
				stock: null,
				parm: null, //产品规格
				id: null,
				paramList: [], //产品规格
				video: [],
				showVideo: false,
				videoSrc: '',
				delivery_place:''
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.id = options.id
			this.getGoodsType(options.id);
			this.getParamList()

		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 获取规格

			// let parm = uni.getStorageSync('parm')
			// if(parm){
			// 	parm = JSON.parse(parm)
			// 	this.parm = parm.map(item=>item.group_value).join(',')
			// } 
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			// uni.removeStorageSync('parm')
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			delVideo(index) {
				this.video.splice(index, 1)
			},
			closeVideo() {
				this.showVideo = false
			},
			playVideo(item) {
				this.videoSrc = item
				console.log(this.videoSrc)
				this.showVideo = true
			},
			confirmInput(index) {
				if (this.paramList[this.paramList.length - 1].param_price && this.paramList[this.paramList.length - 1]
					.name && this.paramList[this.paramList.length - 1].param_image && index == this.paramList.length - 1) {
					this.onAddParams()
				}
			},
			upParamsImage(index) {
				app.globalData.upimgs({
					scannums: 9,
					filename: "cars",
					success: a => {
						for (var t in a) {
							this.paramList[index].param_image = a[t].all
							this.confirmInput(index)
						}
					}
				});
			},
			onAddParams() {
				this.paramList.push({
					param_id: 0,
					name: null,
					param_price: null,
					param_image: null
				})
			},
			delParam(index) {
				if (this.id) {
					app.globalData.util.request({
						url: "entry/wxapp/Api",
						data: {
							m: "monai_market",
							r: "goods.index.new_deParam",
							param_id: this.paramList[index].param_id,
							uid: uni.getStorageSync('uid')
						},
						success: res => {
							this.showToast('删除成功');
							this.getParamList()
						},
						fail: res => {
							this.showToast(res.data.message);
						}
					});
				} else {
					this.paramList.splice(index, 1)
				}
			},
			toParamDetails(id) {
				uni.navigateTo({
					url: '/pagesA/productSpecifications/productSpecifications?id=' + id
				})
			},
			getParamList() {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.new_getParam_list",
						goods_id: this.id,
						uid: uni.getStorageSync('uid')
					},
					success: res => {
						if (res.data.data.length) {
							this.paramList = res.data.data
						} else {
							this.onAddParams()
						}
					},
					fail: res => {
						this.showToast(res.data.message);
					}
				});
			},
			toProductSpecifications() {
				uni.navigateTo({
					url: '/pagesA/productSpecifications/productSpecifications'
				})
			},
			getDetails() {
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.goods_detail",
						id: this.id
					},
					success: res => {
						let data = res.data.data;
						this.setData({
							title: data.title,
							sell_price: data.sell_price,
							market_price: data.market_price,
							stock: data.stock,
							// image: JSON.parse(data.image),
							introduce: JSON.parse(data.introduce)
						});
						this.filterImage(data.image)
						
						if (Array.isArray(this.goods_type) && this.goods_type.length) {
							this.goods_type.forEach((item, index) => {
								if (item.id == data.shop_type_id) {
									this.setData({
										currentIndex: index
									});
								}
							});
						}

						if (data.parm) {
							this.parm = data.parm.map(item => item.group_value).join(',')
							uni.setStorageSync('parm', JSON.stringify(data.parm))
						}

						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},
			filterImage(image){
				let images = JSON.parse(image)
				this.image = []
				this.video = []
				images.forEach(item=>{
					this.isVideo(item)
				})
			},
			isVideo(item) {
				var pos = item.lastIndexOf(".");
				var lastname = item.substring(pos)
				if (lastname == '.mp4') {
					this.video.push(item)
				}else{
					this.image.push(item)
				}
			},
			showToast(title) {
				wx.showToast({
					title: title,
					duration: 2000,
					icon: 'none'
				});
			},

			onSubmit() {
				if (!this.title) return this.showToast('请输入商品名称');
				if (!this.currentIndex && this.currentIndex != 0) return this.showToast('请选择商品分类');
				if (!this.delivery_place) return this.showToast('请输入发货地址');
				// if (!this.sell_price) return this.showToast('请输入出售价格');
				// if (!this.market_price) return this.showToast('请输入市场价格');
				// if (!this.stock) return this.showToast('请输入商品库存');
				if (!this.image.length) return this.showToast('请上传展示图片');
				if (!this.introduce.length) return this.showToast('请上传产品详情图');
				if (this.paramList.length < 1) return this.showToast('请上传规格');
				let arr;
				let data = this.paramList[this.paramList.length - 1]
				let keys = Object.keys(data)
				let length = (arr = keys.filter(v => !data[v])).length
				if (length == keys.length || length == 0) {
					if(length == keys.length) this.paramList.pop()
					this.image = this.image.concat(this.video)
					this.onSubmitGoods()
				} else {
					this.showToast('请输入产品规格');
				}
			},
			onSubmitGoods() {
				let data = {
					m: "monai_market",
					r: "goods.index.add",
					uid: wx.getStorageSync('uid'),
					title: this.title,
					delivery_place:this.delivery_place,
					shop_type_id: this.goods_type[this.currentIndex].id,
					// stock: this.stock,
					// market_price: this.market_price,
					// sell_price: this.sell_price,
					image: JSON.stringify(this.image),
					introduce: JSON.stringify(this.introduce),
					param: JSON.stringify(this.paramList)
				};

				if (this.id) {
					data.id = this.id;
					data.r = 'goods.index.up';
				}

				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: data,
					success: res => {
						this.showToast('操作成功');
						setTimeout(() => {
							wx.navigateBack();
						}, 1000);
						wx.hideLoading();
					},
					fail: res => {
						this.showToast(res.data.message);
						wx.hideLoading();
					}
				});
			},
			getImages(imgs) {
				return imgs.map(item => item.img);
			},

			bindRegionChange(event) {
				this.setData({
					currentIndex: event.detail.value
				});
			},

			// 获取商品分类 
			getGoodsType(id) {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.goods_type"
					},
					success: res => {
						this.setData({
							goods_type: res.data.data
						});

						if (id) {
							this.setData({
								id: id
							});
							this.getDetails();
						}
					},
					fail: res => {
						this.showToast(res.data.message);
					}
				});
			},
			onUpVideo() {
				if (this.video.length >= 1) {
					uni.showToast({
						title: '您添加的视频已经很多了',
						icon: "none"
					})
					return
				}
				this.chooseVideo(null)
			},
			chooseVideo(index) {
				const url = app.globalData.util.url("entry/wxapp/Api", {
					m: "monai_market",
					uid: uni.getStorageSync('uid'),
					r: "upvideo"
				});
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						})
						uni.uploadFile({
							url: url,
							filePath: res.tempFilePath,
							name: "file",
							success: (e) => {
								const data = JSON.parse(e.data)
								if (index || index == 0) {
									this.video[index] = data.data.all
								} else {
									this.video.push(data.data.all)
								}
							},
							complete() {
								uni.hideLoading();
							}
						});
					}
				});
			},
			upImage(event) {
				let type = event.currentTarget.dataset['type'];
				let index = event.currentTarget.dataset['index'];
				app.globalData.upimgs({
					scannums: 1,
					filename: "cars",
					success: a => {
						for (var t in a) {
							if (type == 2) {
								if (this.introduce.length <= 15) {
									if (index || index == 0) {
										this.replaceImgs(a[t], type, index);
									} else {
										this.addinImgs(a[t], type);
									}
								} else {
									app.globalData.util.message({
										title: "您添加的图片已经很多了",
										type: "error"
									});
									return;
								}
							} else {
								if (index) {
									this.replaceImgs(a[t], type, index);
								} else if (!this.image.length) {
									this.addinImgs(a[t], type);
								} else {
									app.globalData.util.message({
										title: "您添加的图片已经很多了",
										type: "error"
									});
									return;
								}
							}
						}
					}
				});
			},

			addinImgs: function(a, type) {
				var t = type == 1 ? this.image : this.introduce;
				t.push(a.all);

				if (type == 1) {
					this.setData({
						image: t
					});
				} else {
					this.setData({
						introduce: t
					});
				}
			},

			replaceImgs(a, type, index) {
				var t = type == 1 ? this.image : this.introduce;
				t[index] = a.all;

				if (type == 1) {
					this.setData({
						image: t
					});
				} else {
					this.setData({
						introduce: t
					});
				}
			},

			delImg(event) {
				let type = event.currentTarget.dataset['type'];
				let index = event.currentTarget.dataset['index'];

				if (type == 1) {
					let {
						image
					} = this;
					image.splice(index, 1);
					this.setData({
						image
					});
				} else {
					let {
						introduce
					} = this;
					introduce.splice(index, 1);
					this.setData({
						introduce
					});
				}
			}

		}
	};
</script>
<style>
	@import "./publishGoods.css";

	page,
	.publishGoods {
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.form_specification {
		margin-top: 30upx;
		padding: 0 31upx;
		box-sizing: border-box;

		.specification_head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 39upx;

			.head_title {
				font-size: 30upx;
				color: #333333;
			}

			.head_right {
				padding: 0 20upx 0 18upx;
				box-sizing: border-box;
				height: 56upx;
				background: #23D1BE;
				border-radius: 10upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26upx;
				color: #FFFFFF;

				.add_icon {
					width: 16upx;
					height: 16upx;
				}
			}
		}

		.specification_content {

			.specification_item {
				display: flex;
				margin-bottom: 80upx;

				.item_left {
					position: relative;

					.item_icon {
						position: absolute;
						right: 0;
						top: 0;
						width: 62rpx;
						height: 62rpx;
					}

					.image {
						width: 199upx;
						height: 199upx;
						border-radius: 10upx 10upx 0px 0px;
					}

					.txt {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						width: 100%;
						background-color: rgba(0, 0, 0, 0.5);
						border-radius: 0 0 10upx 10upx;
						height: 60upx;
						text-align: center;
						line-height: 60upx;
						font-size: 26upx;
						color: #FFFFFF;
					}

				}

				.item_upImage {
					position: relative;
					width: 199upx;
					height: 199upx;
					display: flex;
					align-items: center;
					justify-content: center;

					.upImg_img {
						margin-top: -34rpx;
						width: 79rpx;
						height: 76rpx;
					}

					.txt {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						width: 100%;
						background: #03BA80;
						border-radius: 0 0 10upx 10upx;
						height: 60upx;
						text-align: center;
						line-height: 60upx;
						font-size: 26upx;
						color: #FFFFFF;
					}
				}

				.item_right {
					padding-top: 18upx;
					box-sizing: border-box;

					.form_item+.form_item {
						margin-top: 80upx;
					}

					.form_item {
						display: flex;
						align-items: center;

						.form_lab {
							padding-left: 24upx;
							width: 170upx;
							font-size: 24upx;
							box-sizing: border-box;
							color: #333333;
						}

						.form_ipt {
							flex: 1;
							font-size: 30upx;
							padding-right: 24upx;
							box-sizing: border-box;
						}
					}
				}
			}
		}
	}

	.close_image {
		position: fixed;
		right: 50upx;
		top: 100upx;
		width: 60upx;
		height: 60upx;
		z-index: 9;
	}
</style>
